<template>
  <div class="my-order">
  	<shop-header ref="shopHeader">	
			<h2>我的订单</h2>	
		</shop-header>
		<div class="order-nav-wrapper">
			<div class="my-order-nav bottom-1px">
				<div class="order-nav-item" :class="{ active: nowIndex == 0 }" @click="toggleOrderType(0)"><span>全部</span></div>
				<div class="order-nav-item" :class="{ active: nowIndex == 1 }" @click="toggleOrderType(1)"><span>待付款</span></div>
				<div class="order-nav-item" :class="{ active: nowIndex == 2 }" @click="toggleOrderType(2)"><span>待发货</span></div>
				<div class="order-nav-item" :class="{ active: nowIndex == 3 }" @click="toggleOrderType(3)"><span>待收货</span></div>
				<div class="order-nav-item" :class="{ active: nowIndex == 4 }" @click="toggleOrderType(4)"><span>待评价</span></div>
			</div>
		</div>
		<split></split>
		<div class="order-list" 
			v-infinite-scroll="loadMore"
	    infinite-scroll-disabled="loading"
	    infinite-scroll-distance="10">
			<router-link class="order-item" :to="{ path: '/my/order/detail', query: { id: item._id } }" tag="div" v-for="(item, index) in orderList" :key="index">
				<div class="order-box-hd bottom-1px">
					<span class="order-number">订单号：<b>{{ item.orderNo }}</b></span>
					<span class="order-status">{{ item.status }}</span>
				</div>
				<div v-for="(goods, idx) in item.goods" :key="idx" class="order-box-bd" :class="{ 'bottom-1px': idx < item.goods.length-1 }">
					<div class="order-img">
						<span class="img-holder"><img :src="goods.goodsCover"></span>
					</div>
					<div class="order-content">
						<h3 class="name">{{ goods.goodsName }}</h3>
						<div style="height: 15px">
							<div v-if="goods.selectedAttrs" class="param">{{ goods.selectedAttrs }}</div>
						</div>
						<div class="order-content-flex">
							<span class="price">¥{{ goods.price | toDecimal }}</span>
							<span class="number">x{{ goods.quantity }}</span>
						</div>
					</div>
				</div>
				<div v-if="item.status !== '待发货'" class="order-edit top-1px">
					<!-- <x-button plain mini class="order-btn-item">取消订单</x-button> -->
					<x-button @click.native.prevent="toPublishComment(item._id)" v-if="item.status === '待评价'" plain mini class="order-btn-item" >立即评价</x-button>
					<x-button @click.native.prevent="confirmReceive(item.orderNo)" v-if="item.status === '待收货'" plain mini class="order-btn-item" >确认收货</x-button>
					<x-button v-if="item.status === '待付款'" plain mini class="order-btn order-btn-item red">立即付款</x-button>
					<x-button v-if="item.status === '已完成'" plain mini class="order-btn-item">删除订单</x-button>
				</div>
			</router-link>
		</div>
		<div class="spinner-wrapper">
      <mt-spinner v-show="loading && orderList.length > 0" class="triple-bounce" type="triple-bounce"></mt-spinner>
      <load-more v-show="nomore && orderList.length > 0" :show-loading="false" tip="暂无更多数据" background-color="#f5f5f5"></load-more>
    </div>
		<no-results v-if="orderList.length == 0"></no-results>		      
  </div>
</template>

<script>
import ShopHeader from '@/components/public/ShopHeader'
import { XButton, LoadMore } from 'vux'	
import { toDecimal } from '@/utils/mUtils'
import Split from '@/components/public/Split'
import http from '@/utils/http'
import NoResults from '@/components/public/NoResults'

export default {
	components: {
		ShopHeader,
		Split,
		NoResults,
		XButton,
		LoadMore
	},
	data () {
		return {
  		nowIndex: 0,
  		orderList: [],
  		page: 1,
  		limit: 5,
  		nomore: false,
  		loading: true,
		}
	},
  methods: {
  	// 上拉加载更多
  	loadMore () {
  		if (!this.nomore) {
      	this.loading = true
        setTimeout(() => {
          this.getOrderList('all')
        }, 500)
      }
  	},
  	toPublishComment (id) {
  		this.$router.push({ path: '/order/publishComment', query: { id } })
  	},
  	// 确认收货
    confirmReceive (orderNo) {
      this.$vux.confirm.show({
        title: '提示信息',
        content: '确定要收货吗？',
        onConfirm: () => {
          http.post('/api/v1/order/confirmReceive', { orderNo }, false, res => {
            if (res.status == 1) {
              this.$vux.toast.show({
              	type: 'success',
              	text: res.msg,
              	width: 'auto',
              	position: 'middle'
              })
              setTimeout(() => {
              	this.orderList = []
	              this.$router.push({ path: '/my/order', query: { type: 4 } })
              })	              	
            }else {
            	this.$vux.toast.show({
              	type: 'warn',
              	text: res.msg,
              	width: 'auto',
              	position: 'middle'
              })
            }
          })
        }
      })
    },
  	toggleOrderType (index) {
  		this.nowIndex = index
  		this.orderList = []
  		this.page = 1
  		this.$router.push({ path: '/my/order', query: { type: index } })	
  	},
  	getOrderList (type) {
			let method = type, params = {}
			// 初始化数据
	    switch (String(method)) {
	      case '0':
	        method = 'all'
	        break;
	      case '1':
	        method = 'unpayment'
	        break;
	      case '2':
	        method = 'unshipped'
	        break;
	      case '3':
	        method = 'shipped'
	        break;
	      case '4':
	        method = 'unrating'
	        break;  
	    }
	    params = {
	    	page: this.page,
	    	limit: this.limit
	    }
			http.get('/api/v1/orders/' + method, params, false, res => {
				if (res.status == 1 && res.data.length > 0) {
					let data = res.data
					let orderList = data.map(item => {
						switch (item.status) {
	            case 0:
	              item.status = '待付款'
	              break;
	            case 1:
	              item.status = '待发货'
	              break;
	            case 2:
	              item.status = '待收货'
	              break;
	            case 3:
	              item.status = '待评价'
	              break;
	            case 4:
	              item.status = '已完成'
	              break;   
	          }
	          return item
					})
					orderList.forEach(n => {
						this.orderList.push(n)
					})
					this.page ++
          this.nomore = false
          this.loading = false
          if (res.data.length < this.limit) {
          	this.nomore = true
          }
				}else {
					this.loading = false
          this.nomore = true
          return
				}
			})
		}
  },
  mounted () {
  	let that = this
  	this.nowIndex = this.$route.query.type
		this.$el.onscroll = function () {
  		that.$refs.shopHeader.isShow = false
		}
		this.getOrderList(this.nowIndex)
		var date = new Date(2012, 11, 21, 5, 30, 0);
  	console.log(date)
  },
  watch: {
  	$route () {
  		this.nowIndex = this.$route.query.type
  		this.getOrderList(this.nowIndex)
  	}
  },
  filters: {
		toDecimal (val) {
			return toDecimal(val)
		}
  }
}
</script>

<style scoped>
.order-nav-wrapper {
	height: 42px;
}
.my-order-nav {
	position: fixed;
	top: 43px;
	width: 100%;
	max-width: 640px;
	display: flex;
	background: #fff;
	z-index: 98;
}
.order-nav-item {
	flex: 1;
	text-align: center;
}
.order-nav-item span {
	position: relative;
	display: inline-block;
	font-size: 14px;
	padding: 10px 0;
	color: #333;
}
.order-nav-item.active span {
	color: #e93b3d; 
}
.order-nav-item.active span:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #e93b3d;
}
.order-item {
	background: #fff;
	margin-bottom: 10px;
}
.order-item:last-child {
	margin-bottom: 0;
}
.order-box-hd {
	display: flex;
	padding: 8px 15px;
}
.order-number {
	flex: 1;
	color: #999;
}
.order-number b {
	font-weight: normal;
	font-style: normal;
	color: #333;
}
.order-status {
	font-size: 14px;
	color: #e93b3d;
}
.order-box-bd {
	display: flex;
	padding: 15px;
}
.order-box-bd::after {
	left: 15px;
	right: 15px;
}
.order-img {
	flex: 0 0 75px;
	width: 75px;
	height: 75px;
	margin-right: 10px;
}
.order-img .img-holder {
	display: block;
	padding-bottom: 100%;
}
.order-content {
	flex: 1;
}
.name {
	font-size: 14px;
	color: #333;
	line-height: 20px;
	height: 40px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.param {
	color: #787878;
	font-size: 12px;
	line-height: 12px;
	padding-top: 3px;
}
.order-content-flex {
	display: flex;
	padding-top: 5px;
	line-height: 14px;
}
.price {
	flex: 1;
	font-size: 14px;
	color: #e93b3d;
}
.number {
	font-size: 14px;
	color: #999;
}
.order-edit {
	padding:  10px 15px;
	text-align: right;
	font-size: 0;
}
.order-btn {
	display: inline-block;
	margin-left: 5px;
	margin-top: 0;
}
.order-btn-item {
	border-color: #eaeaea;
	height: 28px;
	line-height: 28px;
	border-radius: 30px;
	color: #666;
}
.red {
	border-color: #e93b3d;
	color: #e93b3d;
}
</style>
